iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Modern Web

少年學Vue,如隙中窺月系列 第 12

[Day12] 動態切換 ClassName

  • 分享至 

  • xImage
  •  

物件方式

先前提到我們可以使用 v-bind 來動態綁定會變化的元素屬性,比如用 :class = "{'套用類別名稱':判斷值}",以物件方式加入類別樣式,在這裡我們有另一種寫法,就是直接將 class 裡面所存放的物件,直接存放在 Vue 資料中,像是下面範例的 classObject,這樣的好處是可直接透過物件的方式來修改類別樣式的判斷式,而不用在另外用資料來存判斷式的值,像是 isColorRedisTextBold 就可以省掉。我們用 v-onbutton 加上 click 事件,觸發之後可以變更判斷式的值,用否定語法,將 true 變成 false ,或 false 變成 true 來套用樣式,要注意第二種寫法,如果我們要存取物件時,如果遇到物件內的存取名稱是用-符號連接,我們要改成用['存取名稱']才不會顯示錯誤,像是 text-bold

<body>
    <div id=app>
        <p :class="{'color':isColorRed,'text-bold':isTextBold}">物件寫法1</p>
        <button @click="isColorRed=!isColorRed">變紅</button>
        <button @click="isTextBold=!isTextBold">變粗</button>
        <p :class="classObject">物件寫法2</p>
        <button @click="classObject.color=!classObject.color">變紅</button>
        <button @click="classObject['text-bold']=!classObject['text-bold']">變粗</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            isColorRed:true,
            isTextBold:true,
            classObject:{
                'color':true,
                'text-bold':true
            }
        }
    })
</script>
	.color{
        color:red;
    }
    .text-bold{
        font-weight: bold;
    }

陣列方式

使用物件加入類別的方式,我們已經知道類別的數量一個一個去設定類別的值,如果我們今天不能判斷有多少類別樣式要套用,就得採用陣列的方式 : class = ['類別名稱','類別名稱'] 來加入類別樣式,加上前面提到,我們可以用 v-model 將一個陣列資料和 checkbox 輸入綁定,當我們點擊 checkbox 點擊欄位,所設定的 value 就會加入陣列資料中,而我們將類別樣式設定成value,當點擊後 classArray 陣列就會加入此值並且套用此類別樣式。

<body>
    <div id=app>
        <p :class="['color','text-bold']">陣列寫法1</p>
        <p :class="classArray">陣列寫法2</p>
        <input type="checkbox" value="color" v-model="classArray"></input>
        <input type="checkbox" value="text-bold" v-model="classArray"></input>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            classArray:[]
        }
    })
</script>
	.color{
        color:red;
    }
    .text-bold{
        font-weight: bold;
    }

行內樣式

我們也可以直接插入 style 樣式屬性,而不使用類別樣式,插入樣式屬性的方式 :style = { 樣式屬性:"樣式的值"},然後也可以分為物件還有陣列的方式。最後提醒如果我們要使用到的屬性或變數,比如 font-weight 中間有 dash - 符號的名稱,我們如果直接使用它會出錯,必須使用 ' ' 將名稱包起來,或者是將它改寫成 camelCased (駝峰) 命名,將 dash 刪除並且將 dash 後面變大寫,比如像是 fontWeight

<body>
    <div id=app>
        <h2>行內樣式</h2>
        <p style="font-weight:bold;color:red;">一般插入行內樣式方法</p>
        <p :style="{fontWeight:'bold',color:'red'}">物件插入行內樣式方法 1</p>
        <p :style="classObjects">物件插入行內樣式方法 2</p>
        <p :style="[{fontWeight:'bold'},{color:'red'}]">陣列插入行內樣式方法 1</p>
        <p :style="[color,font]">陣列插入行內樣式方法 2</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            classObjects:{
                fontWeight:'bold',
                color:'red'
            },
            font:{
                fontWeight:'bold'
								//改成 'font-weight':'bold'也可以
            },
            color:{
                color:'red'
            }
        }
    })
</script>

自動加上 Prefix

有些瀏覽器需要加上前綴字(Prefix) ,使新的 css 語法能在不同排版的瀏覽器中正確顯示。可以透過 Can I use 這個服務來查詢哪些 css 語法,在哪些瀏覽器中需要加上前綴字 Prefix。而如果我使用 Vue 的話,Vue 會自動幫我們幫語法的前綴字補上。


上一篇
[Day11] 資料綁定細節
下一篇
[Day13] 迴圈 (v-for) 進階(1)
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言